<template>
  <div class="spec-preview">
    <!-- 放大镜 -->
    <vue-photo-zoom-pro
      :high-url="imgUrl"
      :scale="2"
      :out-zoomer="true"
      :width="200"
      :height="200"
    >
      <img :src="imgUrl" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
import VuePhotoZoomPro from "vue-photo-zoom-pro";
import "vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css";

export default {
  name: "Zoom",
  props: ["imgUrl"],
  components: { VuePhotoZoomPro }, //注册放大镜组件
};
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 100%;
    height: 100%;
  }
  .zoomer {
    // top: 0 !important;
    z-index: 1;
  }
  .selector {
    background-color: rgba(231, 131, 131, 0.219);
  }

}
</style>
